<template>
    <div class="pic-block">
        <!-- 400x400 -->
        <div class="pic-main"></div>
        <!-- 68x68 -->
        <div class="pic-list">
            <ul>
                <li v-for="(item,index) in picList">
                    <img :src="item" alt="" srcset="">
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const picList = ref(['https://pic.imgdb.cn/item/65f3ba029f345e8d033cabef.png','https://pic.imgdb.cn/item/65f3ba029f345e8d033cabef.png','https://pic.imgdb.cn/item/65f3ba029f345e8d033cabef.png','https://pic.imgdb.cn/item/65f3ba029f345e8d033cabef.png','https://pic.imgdb.cn/item/65f3ba029f345e8d033cabef.png']);
</script>

<style lang="scss" scoped>
.pic-main{
    width: 400px;
    height: 400px;
    border: 1px solid red;
}
.pic-list ul{
    position: relative;
    padding-left: 0;
}
.pic-list ul li{
   float: left;
   cursor: pointer;
}
.pic-list ul li:not(:first-child){
    margin-left: 16px;
}
.pic-list ul li img{
    width: 68px;
    height: 68px;
    box-sizing: border-box;
}
.pic-list ul li:hover img{
    border: 1px solid red;
}
</style>
